<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: lyn
 * @Date: 2022-09-15 09:42:10
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-22 14:48:07
 * @Description:
 *
-->

<template>
  <div class="cluster">
    <div>
      <el-row>
        <!-- 第一列 -->
        <el-col :span="4">
          <div class="left-box">
            <img
              alt=""
              :src="RunningStateImage(ClusterInfoArr.status)"
              style="position: absolute;left: -23px;top: -22px;width: 98px;"
            />
            <img
              alt=""
              :src="CloudTypeImage(ClusterInfoArr.cloudVendor)"
              style="width: 140px;margin: 25px 95px 10px 35px;"
            />
            <div
              style="width: 141px;font-size: 18px;font-family:PingFangSC-Semibold, PingFang SC, sans-serif;font-weight: 600;color: #4A4A4A;margin: -18px 89px 25px 37px;text-align: center;"
            >
              {{ ClusterInfoArr.clusterName }}</div>
          </div>
        </el-col>

        <!-- 第二列 -->
        <el-col :span="6">
          <div class="middle-box">
            <div style="height: 159px;width: 100%;border-right: 1px solid #DAE4EC;">
              <el-row>
                <el-col :span="24">
                  <div style="height: 80px;padding-top: 8px;">
                    <!-- 表格数据 -->
                    <table
                      style="text-align: center;line-height: 25px;width: 100%;border-collapse:collapse;"
                    >
                      <tr
                        style="font-size: 18px;font-family:PingFangSC-Medium, PingFang SC, sans-serif;font-weight: 500;color: #4A4A4A;"
                      >
                        <td>{{ ClusterInfoArr.cloudVendorName }}</td>
                        <td>{{ ClusterInfoArr.status }}</td>
                        <td>{{ ClusterInfoArr.k8sClusterLocation }}</td>
                      </tr>
                      <tr
                        style="font-size: 12px;font-family:PingFangSC-Regular, PingFang SC, sans-serif;font-weight: 400;color: #A3B0BB;"
                      >
                        <td>集群服务商</td>
                        <td>状态</td>
                        <td>所属区域</td>
                      </tr>
                    </table>
                  </div>
                </el-col>
                <el-row>
                  <el-col :span="7">
                    <div style="height: 80px;padding-left: 40px;position: relative;">
                      <div :id="clusterIndex+'_nodeNumId'" style="width: 80px; height: 80px;">
                      </div>
                      <img
                        alt=""
                        src="@/assets/imgs/cn-insight/ClusterPage/node.png"
                        style="position: absolute;width: 17px;top: 32px;left:71px"
                      />
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div style="height: 80px;padding-top: 20px;">
                      <div style="width: 50px;text-align: center;">
                        <div
                          style="font-size: 18px;font-family: PingFangSC-Semibold, PingFang SC, sans-serif;font-weight: 600;color: #4A4A4A;line-height: 25px;"
                        >
                          {{ ClusterInfoArr.normalNodeNum }}/{{ ClusterInfoArr.totalNodeNum }}
                        </div>
                        <div
                          style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC, sans-serif;font-weight: 400;color: #A3B0BB;line-height: 17px;"
                        >
                          节点数</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div style="height: 80px;padding-left: 35px;position: relative;">
                      <div :id="clusterIndex+'_itemNumId'" style="width: 80px; height: 80px;">
                      </div>
                      <img
                        alt=""
                        src="@/assets/imgs/cn-insight/ClusterPage/item.png"
                        style="position: absolute;width: 16px;top: 32px;left:67px"
                      />
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div style="height: 80px;padding-top: 20px;">
                      <div style="width: 50px;text-align: center;">
                        <div
                          style="font-size: 18px;font-family: PingFangSC-Semibold, PingFang SC, sans-serif;font-weight: 600;color: #4A4A4A;line-height: 25px;"
                        >
                          {{ ClusterInfoArr.normalPodNum }}/{{ ClusterInfoArr.totalPodNum }}</div>
                        <div
                          style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC, sans-serif;font-weight: 400;color: #A3B0BB;line-height: 17px;"
                        >
                          实例数</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 第三列 -->
        <el-col :span="7">
          <div class="right-box">
            <div :id="clusterIndex+'_CPUusage'" style="width: 100%; height: 100%;"></div>
          </div>
        </el-col>

        <!-- 第四列 -->
        <el-col :span="7">
          <div class="right-box">
            <div :id="clusterIndex+'_Memoryusage'" style="width: 100%; height: 100%;"></div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCloudProviderImg } from '@/utils/cnap/constant'

export default {
  name: 'ClusterTemplate',
  components: {},
  mixins: [],
  props: {
    // 组件传参
    ClusterInfoArr: {
      type: Object,
      default: () => { }
    },
    // 组件传参
    clusterIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {},
  created() { },
  mounted() {
    this.drawNodeNum()// 绘制节点环状图
    this.drawItemNum()// 绘制区域环状图
    this.drawCPUusage()// 绘制cpu使用率
    this.drawMemoryusage()// 绘制内存使用率
  },
  methods: {
    /**
     * @description: 趋势图绘制
     * @description: 节点环状图
     * @return {*}
     */
    drawNodeNum() {
      const myChart = echarts.init(document.getElementById(this.clusterIndex + '_nodeNumId'))// 启动
      const option = {
        color: ['#D6E8FF', '#00C4FF'], // 颜色
        series: [
          {
            name: 'Node Number',
            type: 'pie',
            radius: ['40%', '70%'], // 环状图
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4, // 边界大小
              borderColor: '#fff', // 颜色
              borderWidth: 0// 宽度
            },
            label: {
              show: false
            },
            data: this.getPieNum(this.ClusterInfoArr.normalNodeNum, this.ClusterInfoArr.totalNodeNum) // 数据
          }]
      }
      myChart.setOption(option)// 数据加载
    },
    /**
     * @description: 趋势图绘制
     * @description: 区域环状图
     * @return {*}
     */
    drawItemNum() {
      const myChart = echarts.init(document.getElementById(this.clusterIndex + '_itemNumId'))// 启动
      const option = {
        color: ['#D6E8FF', '#00C4FF'],
        series: [
          {
            name: 'Item Number',
            type: 'pie',
            radius: ['40%', '70%'], // 环状图大小
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 4, // 边界大小
              borderColor: '#fff', // 颜色
              borderWidth: 0// 宽度
            },
            label: {
              show: false
            },
            data: this.getPieNum(this.ClusterInfoArr.normalPodNum, this.ClusterInfoArr.totalPodNum)// 数据
          }]
      }
      myChart.setOption(option)// 数据加载
    },

    /**
     * @description: 环状数值
     * @description: 节点、区域
     * @return {*}
     */
    getPieNum(normalNum, totalNum) {
      return [
        { value: totalNum - normalNum, name: 'off' },
        { value: normalNum, name: 'on' }
      ]
    },
    /**
     * @description: 趋势图
     * @description: cpu使用率
     * @return {*}
     */
    drawCPUusage() {
      const myChart = echarts.init(document.getElementById(this.clusterIndex + '_CPUusage'))
      const option = {
        title: {
          text: 'CPU使用率', // 标题
          top: '8%'// 位置
        },
        legend: {
          data: ['node-cpu-usage'], // 提示图标
          right: '9%', // 位置
          top: '10%', // 位置
          icon: 'circle', // 形状
          itemHeight: 10, // 高度
          itemWidth: 20, // 宽度
          itemStyle: {
            color: '#0091FF'// 颜色
          }
        },
        grid: {
          top: '26%', // 位置
          left: '10%', // 位置
          right: '10%', // 位置
          bottom: '18%'// 位置
        },
        xAxis: {
          type: 'category',
          data: this.getLineXdata(this.ClusterInfoArr.cpu), // X轴数据
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 5, // 最小间隔
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          min: 0, // 最小值
          max: 100, // 最大值
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: (val, key) => {
              if (key === 5) { return val + '%' } else if (key === 0) { return val }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line', // 线段
            label: {
              backgroundColor: '#6a7985'// 颜色
            },
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: 'node-cpu-usage',
            data: this.getLineYdata(this.ClusterInfoArr.cpu),
            type: 'line', // 线段
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, // 宽度
                  type: 'solid', // 线段类型
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 渐变色
                    offset: 0,
                    color: '#118CF8'// 颜色
                  }, {
                    offset: 1,
                    color: '#27E0FC'// 颜色
                  }])
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 渐变色
                  offset: 0,
                  color: 'rgba(201, 242, 248, 1)'// 颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 1)'// 颜色
                }])
              }
            },
            smooth: true,
            symbol: 'none'
          }]
      }
      myChart.setOption(option)// 设置生效
    },
    /**
     * @description: 趋势图
     * @description: 内存使用率
     * @return {*}
     */
    drawMemoryusage() {
      const myChart = echarts.init(document.getElementById(this.clusterIndex + '_Memoryusage'))
      const option = {
        title: {
          text: '内存使用率', // 标题
          top: '8%'// 位置
        },
        legend: {
          data: ['node-memory-usage'],
          right: '9%', // 位置
          top: '10%', // 位置
          icon: 'circle',
          itemHeight: 10, // 高度
          itemWidth: 20, // 宽度
          itemStyle: {
            color: '#9C00FF'// 颜色
          }
        },
        grid: {
          top: '26%', // 位置
          left: '10%', // 位置
          right: '10%', // 位置
          bottom: '18%'// 位置
        },
        xAxis: {
          type: 'category',
          data: this.getLineXdata(this.ClusterInfoArr.memory),
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: (val, key) => {
              if (key === 5) { return val + '%' } else if (key === 0) { return val }
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line', // 线段
            label: {
              backgroundColor: '#6a7985'// 颜色
            },
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: 'node-memory-usage',
            data: this.getLineYdata(this.ClusterInfoArr.memory), // Y轴数据
            type: 'line', // 线段
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: 'solid', // 线段类型
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 渐变色
                    offset: 0,
                    color: '#C611F8'// 颜色
                  }, {
                    offset: 1,
                    color: '#2777FC'// 颜色
                  }])
                }
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 渐变色
                  offset: 0,
                  color: 'rgba(149, 96, 253, 0.1900)'// 颜色
                }, {
                  offset: 1,
                  color: 'rgba(87, 94, 250, 0)'// 颜色
                }])
              }
            },
            smooth: true,
            symbol: 'none'
          }]
      }
      myChart.setOption(option)
    },

    /**
     * @description: 数据转化
     * @description: X轴数据
     * @return {*}
     */
    getLineXdata(data) {
      var time = []
      for (let i = data.length - 1; i >= 0; i--) {
        time.push(data[i].key.slice(11, 16))
      }
      return time
    },
    /**
     * @description: 数据转化
     * @description: Y轴数据
     * @return {*}
     */
    getLineYdata(data) {
      var usage = []
      for (let i = data.length - 1; i >= 0; i--) {
        usage.push(data[i].value * 1000 / 10)
      }
      return usage
    },
    /**
     * @description: 图片加载
     * @description: 运行状态
     * @return {*}
     */
    RunningStateImage(status) {
      let clusterState = require('@/assets/imgs/cn-insight/ClusterPage/wait.png')
      if (status === '运行中') {
        clusterState = require('@/assets/imgs/cn-insight/ClusterPage/run.png')
      } else if (status === '停止服务') {
        clusterState = require('@/assets/imgs/cn-insight/ClusterPage/stop.png')
      }
      return clusterState
    },
    /**
     * @description: 图片加载
     * @description: 云商图标
     * @return {*}
     */
    CloudTypeImage(cloudVendor) {
      return getCloudProviderImg(this.$store.state.app.cloudVendors, cloudVendor)
    }
  }
}
</script>

<style lang="less" scoped>
.cluster {
    margin: 20px 34px 31px 22px;
    height: 210px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
    border-radius: 4px;

    .left-box {
        background-image: url(../../../../assets/imgs/cn-insight/ClusterPage/background.png);
        background-size: 280px 228px;
        background-position: -8px -9px;
        position: relative;
        height: 210px;
    }

    .middle-box {
        padding: 25px 0;
        height: 210px;

        td:not(:last-child) {
            border-right: 1px solid #DAE4EC;
        }
    }

    .right-box {
        padding-left: 30px;
        height: 210px;
    }

}
</style>
